<template>
    <teleport :to='props.to'>
        <!-- <van-nav-bar :title="props.title" :left-text="props.leftText" :right-text="props.rightText"  left-arrow :border="false" fixed placeholder>
            <template #right>
                <van-icon name="search" size="18" />
            </template>
        </van-nav-bar> -->

        <!-- 
            v-bind="props"  将TelNavBar组件 接受属性传递给 navBar

            @click-left="emit('click-left',$event)" @click-right="emit('click-right',$event)"  当点击navbar的左边和右边时 触发TelNavBar组件绑定的自定义事件 
         -->
        
        <!--  TelNavBar组件 接收三个插槽内容-->
        <!-- <slot name="left">11111</slot>
        <slot name="title">2222</slot>
        <slot name="right">33333</slot> -->
         
        {{ count }}
        <van-nav-bar v-bind="props" @click-left="emit('left', $event)" @click-right="emit('right', $event)">
           <!--  TelNavBar组件 接收三个插槽内容直接传递给navBar(有才会传,没有就不传)-->
            <template #left v-if="slots.left">
                <slot name="left"></slot>
            </template>
            <template #title  v-if="slots.title">
                <slot name="title"></slot>
            </template>
            <template #right  v-if="slots.right">
                <slot name="right"></slot>
            </template>
        </van-nav-bar>
       
    </teleport>
</template>


<script setup lang="ts">

// TelNavBar组件 接受属性:和 telport组件 navBar组件

import { NavBar } from 'vant';
import { ref,useSlots } from 'vue';
console.log(1111, NavBar);

// TelNavBar组件 接受属性
const props = defineProps({
    // 接受属性给telport组件用 
    to: {
        type: String,
        required: true,
    },
    // 接受属性给navBar组件用 (属性多,自己写->麻烦)
    // title:{
    //     type:String,
    // },

    // 接受属性给navBar组件用 (接收的属性和Navbar保持一致)
    ...NavBar.props,
})
console.log(2222, props);


let count = ref(10);







// TelNavBar组件 接受事件

const emit = defineEmits(["left", "right"])



const slots = useSlots();
console.log(3333,slots);



// 组件暴露的方法
defineExpose({
    changeCount(val:string|number){
        count.value = val;
    }
})







// 第一次封装(官方)
function add2(a: number, b: number): number {
    return a + b;
}

// 二次封装
function add3(a: number, b: number, c: number) {
    return add2(a, b) + c;
}

</script>

<style scoped></style>